<template>
    <div class="pub">
        <div class="status_f">
            <div class="ones">
                <img src="@/assets/img/ic_she@2x.png" alt="">
                <div>
                    <h3 class="biao" > {{ deviceNames }} </h3>
                    <p>设备名称</p>
                </div>
            </div>
            <div class="ones">
                <img v-if="deviceNames" src="@/assets/img/ic_lian@2x.png" alt="">
                <img v-else src="@/assets/img/ic_lian_dis@2x.png" alt="">
                <div>
                    <h3>
                        <span class="sp1" v-if="deviceNames">正常</span>
                        <span class="sp2" v-else>离线</span>
                    </h3>
                    <p>链接状态</p>
                </div>
            </div>
            <div class="ones">
                <img v-if="deviceNames" src="@/assets/img/ic_zhuang@2x.png" alt="">
                <img v-else src="@/assets/img/ic_zhuang_dis@2x.png" alt="">
                <div>
                    <h3>
                        <span class="sp1" v-if="deviceNames">正常</span>
                        <span class="sp2" v-else>未工作</span>
                    </h3>
                    <p>设备状态</p>
                </div>
            </div> 
        </div> 
    </div>
</template>
<script lang="ts" setup>
import { inject } from 'vue'
// inject: ['deviceName']
const deviceNames = inject('deviceName',null)
console.log(deviceNames,'-------------------status.deviceName');

</script>


<style lang="scss"></style>
